<template>
    <div class="mapBottom">
        <div class="div1">
            <p>05'30''</p>
            <p>分钟/公里</p>
        </div>
        <div class="div2">
            <p>00:11:40</p>
            <p>用时</p>
        </div>
        <div class="div3">
            <p>144</p>
            <p>千卡</p>
        </div>
        <div v-if="flag" class="hidden">
            <span class="span1">2.01</span>
            <span class="text">公里</span>
            <span class="span2">12月12日</span>
            <span class="span3">18:44</span>
        </div>
    </div>
</template>
<script>
export default {
    name:'RunMapBottom',
    data(){
        return{
            flag:true
        }
    }
}
</script>
<style lang="less" scoped>
.mapBottom{
    position:fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 110px;
    background-color: #333;
    display: flex;
    position: relative;
    .div1{
        flex: 1;
        padding-top: 40px;
        box-sizing: border-box;
        p:first-child{
           color:#Fddf05;
           font-size: 22px;
           margin-left: 32px;
        }
        p:last-child{
            width: 100px;
            height: 25px;
            line-height: 25px;
            text-align: center;
            color:#Fddf05;
            font-size: 14px;
            margin-left: 6px;
        }
    }
    .div2{
        flex: 1;
        padding-top: 40px;
        box-sizing: border-box;
        p:first-child{
           color:#Fddf05;
           font-size: 22px;
           margin-left: 30px;
        }
        p:last-child{
            width: 100px;
            height: 25px;
            line-height: 25px;
            text-align: center;
            color:#Fddf05;
            font-size: 14px;
            margin-left: 14px;
        }
    }
    .div3{
        flex: 1;
        padding-top: 40px;
        box-sizing: border-box;
        p:first-child{
           color:#Fddf05;
           font-size: 22px;
           margin-left: 34px;
        }
        p:last-child{
            width: 100px;
            height: 25px;
            line-height: 25px;
            text-align: center;
            color:#Fddf05;
            font-size: 14px;
            margin-left: 4px;
        }
    }
    .hidden{
        width: 250px;
        height: 50px;
        background-color: #Fddf05;
        color:#171818;
        position: absolute; 
        top:-25px;
        line-height: 50px;
        left: 20px;
        .span1{
            font-size: 30px;
            font-weight: 700;
        }
        .text,.span3{
            font-size: 13px;
            font-weight: 500;
        }
        .span2{
            font-size: 13px;
            margin-left: 50px;
            font-weight: 500
        }
    }
}    
</style>